<template>
  <div class="bei">
    <div class="table">
      <div class="top">
        <!-- 搜索框 -->
        <Searchson
          :searchDate="searchDate"
          @toworkhandleChange="handleChange"
          @toworksou="sousuo"
        ></Searchson>
        <!-- 按钮 -->
        <Searchbtn
          :dialogTableVisible="dialogTableVisible"
          @toworkadd="add"
          @toworkdelall="delall"
          @openDialog="daoru"
          @closeDialog="daoruquxiao"
          @toworkconfirm="confirm"
          @toworkhandleExport="handleExport"
          @toworkhandlestudent="handlestudent"
        ></Searchbtn>
      </div>
      <!-- 查看详情 -->
      <Detailstab
        :dialogFormVisible1="dialogFormVisible1"
        :chadata="chadata"
        @toworkguan="guan"
      ></Detailstab>
      <!-- 表格抽离 -->
      <Tableson
        :tableData="tableData"
        @toworkcha="cha"
        @toworkedit="handleEdit"
        @toworkdel="confirmEvent"
        @toworkxuan="xuan"
        @toworkdelcancel="cancelEvent"
      ></Tableson>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="totalItems"
          @current-change="handlePageChange"
        />
      </div>
      <!-- 新增和编辑弹框 -->
      <Addedit
        v-model:visible="dialogFormVisible"
        :flag="flag"
        :form="form"
        @toworkcancel="cancel"
        @toworksubmit="submit"
      ></Addedit>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import qs from 'qs'
import type { TableColumnCtx } from 'element-plus'
import { getlist, addlist, edilist, dellist, detaillist, studenimport } from '../../request/index'
import Tableson from '../../components/commont/Tableson.vue'
import Searchson from '../../components/commont/Searchson.vue'
import Searchbtn from '../../components/commont/Searchbtn.vue'
import Detailstab from '../../components/commont/Detailstab.vue'
import Addedit from '../../components/commont/Addedit.vue'
//总条数
const totalItems = ref(0)
//当前页
const currentPage = ref(1)
//一页几条
const pageSize = ref(10)
////总数量  数据
const tableData = ref([])
//多选  得到表格的ref
const selection = ref(false) //也可以直接传val
//批量导入
const dialogTableVisible = ref(false)
//删除数据
const deldata = ref([])
//查看
const dialogFormVisible1 = ref(false)
const chadata = ref({})
//新增
const dialogFormVisible = ref(false)
//
//搜索的数据
const searchDate = reactive({
  stuName: '',
  stuNo: '',
  origin: '',
  collegeId: '',
  workCity: '',
  page: 1,
  limit: 10
})
//计算属性得到最后一个城市码
const lastWorkCityValue = computed(() => {
  const workCity = searchDate.workCity
  console.log('searchDate.workCity', searchDate.workCity)
  return Array.isArray(workCity) && workCity.length ? workCity[workCity.length - 1] : ''
  // return Array.isArray(workCity) && workCity.length ? workCity[workCity.length - 1] : ''
})
//是编辑还是新增
const flag = ref(true)
//新增表单
const form = reactive({
  id: '',
  //学号
  stuNo: '',
  //姓名
  className: '',
  //班级
  stuName: '',
  //状态
  status: '',
  //生源地
  origin: '',
  //学院id
  collegeid: '',
  // 城市
  workCity: ''
})
//批量删除
const delall = () => {
  let ids = deldata.value
  dellist(ids).then((res) => {
    // console.log(res, '批量删除成功')
    ElMessage.success('批量删成功')
    init()
  })
}
//选择
const xuan = (val: any) => {
  // console.log(val, '1111')
  let ids = val.map((item: any, index: number) => {
    return item.id
  })
  // console.log(ids)
  deldata.value = ids
  console.log([...deldata.value]) //ref的形式得到其实本质上是这个可以打印看看
}
//城市码
const handleChange = (value: Object) => {
  console.log(value)
}
//列表数据
const init = (page = 1, limit = 10) => {
  getlist({ limit, skip: (page - 1) * limit }).then((res) => {
    totalItems.value = res.data.data.total
    console.log(res, '111')
    tableData.value = res.data.data.result.map((item: any, index: number) => {
      if (item.status == '1') {
        item.status = '未毕业'
      } else if (item.status === '2') {
        item.status = '返校重听'
      } else if (item.status === '3') {
        item.status = '已就业'
      } else if (item.status == '4') {
        item.status = '返回未就业'
      } else if (item.status == '5') {
        item.status = '以往未就业'
      }
      if (item.workCity == '3301') {
        item.workCity = '杭州'
      } else if (item.workCity == '1100') {
        item.workCity = '北京'
      } else if (item.workCity == '1200') {
        item.workCity = '天津'
      } else if (item.workCity == '1300') {
        item.workCity = '河北'
      } else if (item.workCity == '1303') {
        item.workCity = '秦皇岛'
      } else if (item.workCity == '3100') {
        item.workCity = '上海'
      }
      return item
    })
    console.log(tableData.value)
  })
}
//接口搜索
const sousuo = () => {
  // searchDate.workCity = lastWorkCityValue.value
  const params = JSON.parse(JSON.stringify(searchDate))
  console.log(params)
  params.workCity = lastWorkCityValue.value
  params.page = currentPage.value // 确保搜索时使用当前页码
  params.limit = pageSize.value

  for (let key in params) {
    if (!params[key] && key !== 'page' && key !== 'limit') {
      delete params[key]
    }
  }
  getlist(params).then((res) => {
    console.log(res, '接口搜索')
    totalItems.value = res.data.data.total
    tableData.value = res.data.data.result.map((item: any, index: number) => {
      if (item.status == '1') {
        item.status = '未毕业'
      } else if (item.status === '2') {
        item.status = '返校重听'
      } else if (item.status === '3') {
        item.status = '已就业'
      } else if (item.status == '4') {
        item.status = '返回未就业'
      } else if (item.status == '5') {
        item.status = '以往未就业'
      } else if (item.workCity == '3301') {
        item.workCity = '杭州'
      }
      if (item.workCity == '3301') {
        item.workCity = '杭州'
      } else if (item.workCity == '1100') {
        item.workCity = '北京'
      } else if (item.workCity == '1200') {
        item.workCity = '天津'
      } else if (item.workCity == '1300') {
        item.workCity = '河北'
      } else if (item.workCity == '1303') {
        item.workCity = '秦皇岛'
      } else if (item.workCity == '3100') {
        item.workCity = '上海'
      }
      return item
    })
  })
}
////切换分页
const handlePageChange = (page: number) => {
  currentPage.value = page
  if (Object.keys(searchDate).some((key) => key !== 'page' && key !== 'limit' && searchDate[key])) {
    sousuo()
  } else {
    init(page, pageSize.value)
  }
}
//页面加载
onMounted(() => {
  init(currentPage.value, pageSize.value)
})
//编辑按钮
const handleEdit = (index: number, row: any) => {
  // console.log(row)
  dialogFormVisible.value = true
  flag.value = false
  form.id = row.id
  form.stuNo = row.stuNo
  form.stuName = row.stuName
  form.className = row.className
  form.workCity = row.workCity
  switch (row.status) {
    case '未毕业':
      form.status = '1'
      break
    case '返校重听':
      form.status = '2'
      break
    case '已就业':
      form.status = '3'
      break
    case '返回未就业':
      form.status = '4'
      break
    case '以往未就业':
      form.status = '5'
      break

    default:
      break
  }
  form.origin = row.origin
  switch (row.collegeName) {
    case '网站工程学院':
      form.collegeid = '2'
      break
    case '游戏学院':
      form.collegeid = '1'
      break

    default:
      break
  }
}
//删除确认框
const confirmEvent = (index: number, row: any) => {
  // console.log(index, row)
  let id = row.id
  // console.log(id)

  dellist(id)
    .then((res) => {
      console.log(res, '删除信息')
      if (res.data.code == 200) {
        ElMessage.success('删除成功')
        init()
      }
    })
    .catch((err) => {
      console.log('删除错误信息', err)
    })
}
const cancelEvent = () => {
  ElMessage.error('删除失败')
}
//添加
const add = () => {
  dialogFormVisible.value = true
  flag.value = true
  form.stuNo = ''
  form.stuName = ''
  form.className = ''
  form.status = ''
  form.origin = ''
  form.collegeid = ''
  form.workCity = ''
}
//提交
const submit = () => {
  console.log(form)
  const { stuNo, className, stuName, status, origin, collegeid, workCity } = form
  if (flag.value) {
    addlist({ stuNo, className, stuName, status, origin, collegeid, workCity })
      .then((res) => {
        if (res.data.code === 200) {
          ElMessage.success('新增成功')
          init()
        }
        // console.log(res, '新增数据')
      })
      .catch((err) => {
        console.log('新增错误信息', err)
      })
  } else {
    edilist(form)
      .then((res) => {
        if (res.data.code == 200) {
          ElMessage.success('编辑成功')
          init()
        }
        // console.log(res, '编辑信息')
      })
      .catch((err) => {
        console.log('编辑错误信息', err)
      })
  }
  dialogFormVisible.value = false
}
//查看详情
const cha = (row: any) => {
  let id = row.id
  detaillist(id).then((res) => {
    // console.log(res, '查看信息')
    dialogFormVisible1.value = true
    chadata.value = res.data.data
  })
}
//取消
const cancel = () => {
  dialogFormVisible.value = false
}
//导出
const handleExport = () => {
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = 'http://localhost:3002/v1.0/api/export/students?' + qs.stringify(searchDate)
  link.setAttribute('download', '学生信息表.xls')
  document.documentElement.appendChild(link)
  link.click()
}
//导入表格
const showCode = ref(false)
const handlestudent = (file: any) => {
  console.log(file.file)
  let formDate = new FormData()
  formDate.append('excelFile', file.file)
  formDate.append('code', '1100')
  studenimport(formDate).then((res) => {
    console.log(res, '导入信息')
    if (res.data.code == 200) {
      ElMessage.success('导入成功')
      showCode.value = true
      dialogTableVisible.value = false
      init()
    } else {
      ElMessage.error('导入失败')
    }
  })
}
const confirm = () => {
  if (showCode.value == false) {
    ElMessage.error('导入失败')
  } else {
    dialogTableVisible.value = false
  }
}
const daoru = () => {
  dialogTableVisible.value = true
}
const daoruquxiao = () => {
  dialogTableVisible.value = false
}
const guan = () => {
  dialogFormVisible1.value = false
}
</script>

<style scoped lang="scss">
.bei {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  padding-top: 20px;
}
.top {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.table {
  margin: 10px;
}
.inp {
  width: 200px;
  height: 30px;
}
.fenye {
  float: right;
  height: 50px;
  margin-top: 20px;
}
</style>